<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零点书喵--在线书城</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/personal.css">
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        
        .book {
            width: 1120px;
            margin: 0 auto;
            /*background-color: #ff6699 ;*/
        }
        
        .book ul {
            list-style: none;
            display: flex;
            /*开启弹性盒子模型 */
            justify-content: space-between;
            /*使其内容和背景对齐*/
            width: 940px;
            padding: 0px;
            /* 清楚默认内边距 */
            margin-bottom: 10px;
            border: 1px solid rgba(24, 9, 77, 0.3)
            /*background-color: #660099 ;*/
        }
        
        .book ul li {
            position: relative;
            width: 230px;
            height: 300px;
            margin: 0px;
            padding-top: 0px;
            /*background-color: #00cc33 ;*/
            perspective: 1000px;
            /*景深 3D特效*/
        }
        
        .book ul li p {
            position: absolute;
            left: 0;
            top: 0;
            width: 230px;
            height: 210px;
            margin: 0px;
            padding-top: 90px;
            /* 上内边距，撑大盒子大小 */
            background-color: rgba(0, 0, 0, 0.6);
            text-align: center;
            transform: rotateY(90deg);
            /*变换 旋转 deg：角度  （设置初始的角度 为 90deg）*/
        }
        
        .book ul li:hover img {
            transform: rotateY(-90deg);
            /* 变换，旋转，deg是角度的意思 */
        }
        
        img {
            transition: 0.5s;
        }
        
        .book ul li:hover p {
            transform: rotateY(0deg);
            /* 鼠标悬停时，此时角度变换为0 */
        }
        
        .p {
            transition: 0.5s;
        }
        
        .right {
            float: right;
            width: 120px;
            height: 210px;
            margin-top: 52px;
            position: fixed;
            top: 100px;
            right: 200px;
            background-color: rgb(255, 255, 255);
        }
        
        .right h2 {
            height: 48px;
            background-color: #3b3f6b;
            /* 水平居中 */
            text-align: center;
            /* 上下居中 */
            line-height: 48px;
            margin: 0 auto;
            font-size: 18px;
            color: #fff;
        }
        
        .right p {
            font-size: 18px;
            height: 30px;
            line-height: 30px;
            padding: 14px 0 10px 30px;
            color: #a5a5a5;
        }
        
        .right p:hover {
            background-color: rgb(247, 241, 255);
            color: #000000;
        }
    </style>
</head>

<body>
    <!-- 此乃头部部分开始 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <a href="about.html">
                <image src="images/logo.png" style="width:195px; height:42px;" alt=""></image>
            </a>
        </div>
        <!-- 导航栏部分 -->
        <div class="nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">商品</a></li>
                <li><a href="book.html">在线书城</a></li>
            </ul>
        </div>
        <!-- 搜索模块 -->
        <div class="search">
            <input type="text" placeholder="请输入你要搜索的书籍">
            <button></button>
        </div>
        <!--个人中心部分开始-->
        <div class="personal">
            <dl>
                <dt class="login">
                    <span><a href="#"">登录</a></span>
                    <div class="login1">
                        <p><a href="#">注册</a></p>
                    </div>
                </dt>
                <dd>
                    <s>
                        <img src="images/ld.png" alt="">
                    </s>
                    <span>
                        <img src="images/user.png" alt="">
                        <a href="#">落影殇随</a>
                    </span>
                </dd>
            </dl>
        </div>
    </div>
    <!-- 个人中心部分结束 -->
    <!-- 此乃头部部分结束 -->
    <!-- 此乃在线书籍页面开始 -->
    <div class="book clearfix">
        <ul>
            <li><img src="images/book1.png" style="width:230px; height: 300px;" alt="">
                <p>《云边有个小卖部》--张嘉佳</p>
            </li>
            <li><img src="images/book2.png" style="width:230px; height: 300px;" alt="">
                <p>《我是猫》--夏目漱石</p>
            </li>
            <li><img src="images/book3.png" style="width:230px; height: 300px;" alt="">
                <p>《摆渡人》--张嘉佳</p>
            </li>
            <li><img src="images/book4.png" style="width:230px; height: 300px;" alt="">
                <p>《从你的全世界路过》--张嘉佳</p>
            </li>
        </ul>
        <div class="right">
            <h2>今日推荐</h2>
            <p><a href="#">我是猫</a></p>
            <p><a href="#">摆渡人</a></p>
            <p><a href="#">小卖部</a></p>
        </div>
        <ul>
            <li><img src="images/book1.png" style="width:230px; height: 300px;" alt="">
                <p>《云边有个小卖部》--张嘉佳</p>
            </li>
            <li><img src="images/book2.png" style="width:230px; height: 300px;" alt="">
                <p>《我是猫》--夏目漱石</p>
            </li>
            <li><img src="images/book3.png" style="width:230px; height: 300px;" alt="">
                <p>《摆渡人》--张嘉佳</p>
            </li>
            <li><img src="images/book4.png" style="width:230px; height: 300px;" alt="">
                <p>《从你的全世界路过》--张嘉佳</p>
            </li>
        </ul>
        <ul>
            <li><img src="images/book1.png" style="width:230px; height: 300px;" alt="">
                <p>《云边有个小卖部》--张嘉佳</p>
            </li>
            <li><img src="images/book2.png" style="width:230px; height: 300px;" alt="">
                <p>《我是猫》--夏目漱石</p>
            </li>
            <li><img src="images/book3.png" style="width:230px; height: 300px;" alt="">
                <p>《摆渡人》--张嘉佳</p>
            </li>
            <li><img src="images/book4.png" style="width:230px; height: 300px;" alt="">
                <p>《从你的全世界路过》--张嘉佳</p>
            </li>
        </ul>
    </div>
    <!-- 此乃在线书籍界面结束 -->
    <!-- footer模块制作 -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <a href="about.html"><img src="images/logo.png" style="width: 195px; height:42px;" alt=""></a>
                <p>零点书喵致力于为全国富有好奇心的男孩纸女孩纸提供知识体系<br /> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#" class="app">下载app</a>
            </div>
            <div class="links">
                <dl>
                    <dt>关于零点</dt>
                    <dd>关于</dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于零点</dt>
                    <dd>关于</dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于零点</dt>
                    <dd>关于</dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>